<!DOCTYPE html>
<html>
<head>
	<title>首页</title>
	<meta charset="UTF-8">
	<meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,,user-scalable=no">
    <!-- mint样式 -->
    <link rel="stylesheet" href="css/mint-ui.css">
    <!-- 页面样式 -->
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/index.css">
	<link rel="stylesheet" type="text/css" href="css/font/iconfont.css">
	<link rel="stylesheet" type="text/css" href="css/footer.css">
	<link rel="stylesheet" type="text/css" href="css/home/header.css">
	<link rel="stylesheet" type="text/css" href="css/home/banner.css">
	<link rel="stylesheet" type="text/css" href="css/home/exposure.css">
	<link rel="stylesheet" type="text/css" href="css/home/theme.css">
	<link rel="stylesheet" type="text/css" href="css/home/hot.css">

	<link rel="stylesheet" type="text/css" href="css/category/easyHeader.css">
	<link rel="stylesheet" type="text/css" href="css/category/goods.css">
	<link rel="stylesheet" href="css/category/categoryItem.css">

	<link rel="stylesheet" type="text/css" href="css/shopcart/index.css">

	<link rel="stylesheet" type="text/css" href="css/my/index.css">

	<link rel="stylesheet" type="text/css" href="css/product/index.css">
	<link rel="stylesheet" type="text/css" href="css/product/detail-pop.css">

	<link rel="stylesheet" type="text/css" href="css/common/line.css">


	<script>
		// var html = document.getElementsByTagName("html")[0];
		
		// var pixclPatio = 1 / window.devicePixelRatio;
		// document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixclPatio+',minimum-scale='+pixclPatio+',maximum-scale='+pixclPatio+',user-scalable=no" />');
		var html = document.getElementsByTagName('html')[0];
		var pageWidth = html.getBoundingClientRect().width;
		// console.log(pageWidth);
		html.style.fontSize = pageWidth / 18.75 + 'px';
	</script>
</head>
<body>
	<div id="app">
		<keep-alive>
	        <router-view></router-view>
	    </keep-alive>
		<div class="footer" v-show="footerShow">
			<div class="footer-contain">
				<router-link to="/home" class="footer-item">					
					<i class="icon iconfont icon-wxbzhuye"></i>
					<span class="name">首页</span>								
				</router-link>
				<router-link to="/category" class="footer-item">					
					<i class="icon iconfont icon-wodedingdan"></i>
					<span class="name">分类</span>										
				</router-link>				
				<router-link to="/shopcart" class="footer-item">				
					<i class="icon iconfont icon-gouwuche"></i>
					<span class="name third">购物车</span>								
				</router-link>				
				<router-link to="/my" class="footer-item">					
					<i class="icon iconfont icon-wodejuhuasuan"></i>
					<span class="name"> 我的</span>									 
				</router-link>
			</div>
		</div>
	</div>



<!-- 数据脚本 -->
<script type="text/javascript" src="js/mock/home.js"></script>
<script type="text/javascript" src="js/mock/category.js"></script>

<!-- 基础库脚本 -->
<script type="text/javascript" src="js/lib/vue.min.js"></script>
<script src="js/lib/mint-ui.js"></script>
<!-- <script src="https://cdn.bootcss.com/mint-ui/2.2.7/message-box/index.min.js"></script> -->
<script type="text/javascript" src="js/lib/vue-router.min.js"></script>
<script type="text/javascript" src="js/lib/bscroll.js"></script>





<!-- 页面开始 -->
<!-- 首页home -->
<script type="text/x-template" id="home-template">
	<div>
		<v-header></v-header>
		<mt-swipe :banner="banner" :auto="0" class="banner" :continuous="false">
		    <mt-swipe-item v-for="item in banner.item">
		    	<div href="" @click="toProduct"><img :src="item.img.url"></div>
		    </mt-swipe-item>
		</mt-swipe>
		<exposure @click.native.preventDefault="aler"></exposure>
		<theme :theme="theme"></theme>
		<hot :hot="hot"></hot>
	</div>
	
</script>
<!-- 1-1.首页header组件 -->
<script type="text/x-template" id="v-header-template">
	<div class="header">
		<div class="logo">
			<img src="img/home/logo.png">
		</div>
		<div class="search">
			<i class="search-icon" v-if="iconshow"></i>
			<input type="search" name="" class="search-input" placeholder="     搜索商品名称"  @input="hidesearch" @keyup.delete="watchValue" @keyup.enter="alertsearch" v-model="headersearch">
		</div>
		<div class="avatar">
			<a href=""><i class="icon iconfont icon-wodejuhuasuan"></i></a>			
		</div>
	</div>
</script>
<!-- 1-3.首页exposure组件 -->
<script type="text/x-template" id="exposure-template">
	<div class="exposure">
		<div class="exposure-item"><img src="img/home/mifen.jpg"></div>
		<div class="exposure-item"><img src="img/home/xinpin.jpg"></div>
		<div class="exposure-item"><img src="img/home/huanxin.jpg"></div>
		<div class="exposure-item"><img src="img/home/wuliu.jpg"></div>
	</div>
</script>
<!-- 1-4.首页theme组件 -->
<script type="text/x-template" id="theme-template">
	<div class="theme">
		<div href="" :class='"theme" + (index + 1)' v-for="(item,index) in theme" @click="toProduct">
			<img :src="item.topic_img.url">
		</div>
	</div>
</script>
<!-- 1-5.首页单品组件 -->
<script type="text/x-template" id="hot-template">
<div class="hot">
	<div class="hot-head">
		<img src="img/home/hot-head.jpg">
	</div>
	<div class="hot-row">
		<div href="" :class="item.className" v-for="(item,index) in hot" @click="toProduct">
			<div class="img"><img :src="item.main_img_url"></div>
			<div class="info">
				<p class="name">{{item.name}}</p>
				<p class="brief">{{item.description}}</p>
				<p class="price">{{item.price}}<span>{{item.pricedes}}</span></p>
			</div>
		</div>
	</div>	
</div>	
</script>


<!-- 分类category -->
<script type="text/x-template" id="category-template">
<div>
	<easyHeader>
		<p class="title">分类</p>
	</easyHeader>
	<goods></goods>
</div>	
</script>
<!-- 2-1.分类页easy-header组件 -->
<script type="text/x-template" id="easyHeader-template">
<div class="easy-header">
	<div class="left">
		<a href="" class="back"></a>
	</div>
	<div class="middle">
		<slot>
		</slot>		
	</div>
	<div class="right">
		<a href="" class="search"><i></i></a>
	</div>
</div>
</script>
<!-- 2-2.分类页goods组件(父) -->
<script type="text/x-template" id="goods-template">
<div class="category">
	<div class="menu" ref="menuWrapper">
		<ul>
			<li 
			v-for="(item,index) in category" 
			@click="showActive($event,index)" 
			:class="{'active':currentIndex===index}"
			ref="menuList"
			><span>{{item.name}}</span></li>
		</ul>
	</div>
	<div class="category-item" ref="itemWrapper">
	<!-- 如何循环至关重要，不可小视，不然拿到的不是dom对象就无法滚动，以及循环的作用域 -->
		<ul>
			<li 
			ref="itemList"
			v-for="(item,index) in category"
			>
            	<categoryItem
				:category="category"
				:item="item"
				:index="index"
              	></categoryItem>
			</li>
		</ul>
	</div>
</div>
</script>
<!-- 2-3.分类页categoryItem组件 -->
<script type="text/x-template" id="categoryItem-template">
	<div class="categoryItem-contain">
		<div class="head-img">
			<a href=""><img :src="item.topic_img.url" alt=""></a>
		</div>
		<div class="title">
			<span>{{item.name}}</span>
		</div>
		<div class="products">
			<div class="product" v-for="(product,i) in item.products">			
				<div class="img">
					<img :src="product.main_img_url">
				</div>
				<div class="des">{{product.name}}</div>			
			</div>
		</div>
	</div>
</script>




<!-- 购物车shopcart -->
<script type="text/x-template" id="shopcart-template">
<div class="shopcart">
	<easyHeader>
		<p class="title">购物车</p>
	</easyHeader>
	<div class="shopcart-empty">
		<img src="img/shopcart/cart.png" class="cart-img">
		<div class="cart-words">购物车还是空的，赶紧行动吧！</div>
		<a href="" class="cart-go">去逛逛</a>
	</div>
</div>
</script>
<!-- 我的my -->
<script type="text/x-template" id="my-template">
	<div class="my">
		<div class="my-header">
			<div class="img"><img src="img/my/my-avatar.png"></div>
			<div class="name">登录/注册</div>
		</div>
		<div class="my-order">
			<div class="name">我的订单</div>
			<div class="all-order">
				<a href="">全部订单</a>
			</div>
		</div>
		<ul class="multi">
			<li class="tool dfk">
				<a href="">
					<div class="icon"></div>
					<span>待付款</span>
				</a>
			</li>
			<li class="tool dah">
				<a href="">
					<div class="icon"></div>
					<span>待收货</span>
				</a>
			</li>
			<li class="tool thx">
				<a href="">
					<div class="icon"></div>
					<span>退换修</span>
				</a>
			</li>
		</ul>
		<g-line></g-line>
		<ul class="items">
			<li class="item huiyuan">
				<a href="">
					<p>会员福利</p>
				</a>
			</li>
			<li class="item youhui">
				<a href="">
					<p>我的优惠</p>
				</a>
			</li>
		</ul>
		<g-line></g-line>
		<ul class="items">
			<li class="item fuwu">
				<a href="">
					<p>服务中心</p>
				</a>
			</li>
			<li class="item zhijia">
				<a href="">
					<p>小米之家</p>
				</a>
			</li>
		</ul>
		<g-line></g-line>
		<ul class="items">
			<li class="item fma">
				<a href="">
					<p>F码通道</p>
				</a>
			</li>
		</ul>
		<g-line></g-line>
		<ul class="items">
			<li class="item shezhi">
				<a href="">
					<p>设置</p>
				</a>
			</li>
		</ul>
		<g-line></g-line>
	</div>
</script>



<!-- 商品详情页组件 -->
<script type="text/x-template" id="product-template">
	<div class="product-detail" v-show="showProduct">
		<div class="product-header">
			<div class="contain" @click="goBack">
				<i class="back"></i>
			</div>
		</div>
		<div class="mainImg">
			<img src="img/product/main.jpg">
		</div>
		<div class="des-contain">
			<p class="name">红米Note 5A 标准版</p>
			<p class="description">
				<font color="#ff4a00">「小米年货节！直降50元，可享小米分期3期免息」</font>
				5.5"高清大屏 / 高通骁龙处理器 / 3080mAh长续航 / 2+1卡槽，最高可扩展128GB
			</p>
			<div class="price">
				<div class="left">649</div>
				<div class="center">699</div>
				<div class="right">
					<span>直降50元</span>
				</div>
			</div>
		</div>
		<div class="detail-line"></div>
		<ul class="tab">
			<li>概述</li>
			<li>参数</li>
			<li>售后</li>
		</ul>
		<div class="tab-view">
			<div class="gaishu">
				<div class="des-img"><img src="img/product/detail-1.jpg"></div>
				<div class="des-img"><img src="img/product/detail-2.jpg"></div>
				<div class="des-img"><img src="img/product/detail-3.jpg"></div>
				<div class="des-img"><img src="img/product/detail-4.jpg"></div>
				<div class="des-img"><img src="img/product/detail-5.jpg"></div>
				<div class="des-img"><img src="img/product/detail-6.jpg"></div>
				<div class="des-img"><img src="img/product/detail-7.jpg"></div>
				<div class="des-img"><img src="img/product/detail-8.jpg"></div>
				<div class="des-img"><img src="img/product/detail-9.jpg"></div>
				<div class="des-img"><img src="img/product/detail-10.jpg"></div>
				<div class="des-img"><img src="img/product/detail-11.jpg"></div>
				<div class="des-img"><img src="img/product/detail-12.jpg"></div>
				<div class="des-img"><img src="img/product/detail-13.jpg"></div>
			</div>
			<div></div>
			<div></div>
		</div>
		<!-- <div class="ui-mask"></div> -->
		<!-- 弹出层 -->
		<mt-popup
		v-model="popShow"
		position="bottom"
		class="detail-pop">
			<div class="content">
				<div class="close" @click="closePop"></div>
				<div class="intro">
					<div class="img">
						<img src="img/product/choose-1.jpg">
					</div>
					<div class="des">
						<p class="price">649</p>
						<p class="miaoshu">红米Note 5A 2GB+16GB 铂银灰</p>
					</div>
				</div>
				<div class="chooseClass border-top-1px">
					<div class="name">颜色</div>
					<div class="chooses">
						<div class="item active">
							<p class=" border-1px">香槟金</p>
						</div>
						<div class="item">
							<p class=" border-1px">樱花粉</p>
						</div>
						<div class="item">
							<p class=" border-1px">铂银灰</p>
						</div>
					</div>
				</div>
				<div class="chooseClass border-top-1px">
					<div class="name">容量</div>
					<div class="chooses">
						<div class="item active">
							<p class=" border-1px">16GB</p>
						</div>
					</div>
				</div>
				<div class="count border-top-1px">
					<div class="title">购买数量</div>
					<div class="control">
						<div class="sub">
							<i class="icon"></i>
						</div>
						<div class="num">
							<span>1</span>
						</div>
						<div class="add">
							<i class="icon"></i>
						</div>
					</div>
				</div>
			</div>
			<div class="tocartBtn" @click="toCart">
				加入购物车
			</div>
		</mt-popup>
		<ul class="detail-footer">		
			<li class="gohome" @click="toHome">
				<i class="icon iconfont icon-wxbzhuye"></i>
				<span class="name">首页</span>
			</li>
			<li class="gocart"@click="toCart">
				<i class="icon iconfont icon-gouwuche"></i>
				<span class="name third">购物车</span>
			</li>
			<li class="addcart" @click="showPop">
				<span>加入购物车</span>
			</li>		
		</ul>
	</div>
</script>

<!-- register -->
<!-- script标签一定要闭合 -->
<script type="text/x-template" id="register-template">
	<div>
		<easy-header>
			<p class="title">用户注册</p>
		</easy-header>
	</div>
</script>


<!-- 通用组件 -->
<!-- line组件 -->
<script type="text/x-template" id="line-template">
	<div class="line"></div>
</script>




<script type="text/javascript" src="js/components/home.js"></script>
<script type="text/javascript" src="js/components/category.js"></script>
<script type="text/javascript" src="js/components/shopcart.js"></script>
<script type="text/javascript" src="js/components/my.js"></script>
<!-- home页 -->
<script type="text/javascript" src="js/components/home/header.js"></script>
<!-- <script type="text/javascript" src="js/components/home/swiper.js"></script> -->
<script type="text/javascript" src="js/components/home/exposure.js"></script>
<script type="text/javascript" src="js/components/home/theme.js"></script>
<script type="text/javascript" src="js/components/home/hot.js"></script>
<!-- category页 --> 
<script type="text/javascript" src="js/components/category/easyHeader.js"></script>
<script type="text/javascript" src="js/components/category/goods.js"></script>
<script type="text/javascript" src="js/components/category/categoryItem.js"></script>
<!-- 商品详情页 -->
<script type="text/javascript" src="js/components/product.js"></script>
<!-- 用户注册页 -->
<script type="text/javascript" src="js/components/register.js"></script>



<!-- 通用 -->
<script type="text/javascript" src="js/components/common/line.js"></script>



<script type="text/javascript">
// var home = {template : '#home-template'};
// var category = {template : '#category-template'};
// var shopcart = {template : '#shopcart-template'};
// var my = {template : '#my-template'};
var routes = [{
    path: '/',
    redirect: '/home'
}, {
    path: '/home',
    component: home
}, {
    path: '/category',
    component: category
}, {
    path: '/shopcart',
    component: shopcart
}, {
    path: '/my',
    component: my
},{
    path: '/product',
    component: product
}];
var router = new VueRouter({
  routes: routes // （缩写）相当于 routes: routes
});


var app = new Vue({
	data: {
		footerShow : true
	},
    el : '#app',
    router : router
});

</script>
</body>
</html>